<template>
  <div class="person-auth" ww3 auto>
    <el-page-header @back="goBack" content="在线记录"> </el-page-header>
    <div class="notice-title">
      <p>用户名：xxxx</p>
      <span class="time">一键清楚记录</span>
    </div>
    <div class="notice-content">
         <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
            >
            <el-table-column
            prop="date"
            label="IP"
            width="180">
            </el-table-column>
            <el-table-column
            prop="name"
            label="省-市"
            width="180">
            </el-table-column>
            <el-table-column
            prop="address"
            label="登录时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="clear(scope.row)" type='danger' size="mini">删除</el-button>   
                </template>
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
import $http from "@/api/info/info"
export default {
  data() {
    return {
        id: null,
        message: {},
        tableData: [{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },{
            date: '192.168.1.11',
            name: '安徽-合肥',
            address: '2021-10-25 10:22:12'
        },]
    }
  },
  mounted() {
    this.content = sessionStorage.getItem("cmsInformContent");
    this.id = this.$route.params.id;
    this.cmsInformDetailed();
  },
  methods: {
    clear(data) {
        console.log(data);
    },
    formatter(row, column) {
        return row.address;
    },
    goBack() {
      this.$router.go(-1)
    },
    /**
     * 获取公告详情
     */
    cmsInformDetailed() {
      let that = this;
      let data = {
        id: this.id
      };
      $http.cmsInformDetailed(data).then(res => {
        that.message = res.data;
        console.log(that.message);
      })

    },
  }
}
</script>

<style scoped>
.notice-content h1{
  color: #555;
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 30px;
}
.notice-title{
  font-size: var(--title-small);
  margin-bottom:20px;
  margin-top: 20px;
  height: 40px;
  line-height: 40px;
  position: relative;
  border-top: 1px solid #d9dcde;
}
.time{
  position: absolute;
  bottom: 0;
  right: 0;
  color: red;
  cursor: pointer;
}
.person-auth >>> .el-table th {
    background: #f0f0f0;
}
</style>
